<template>
    <div style="padding: 10px">
        <el-card class="box-card" shadow="hover">
            <!--新增区域-->
            <div style="margin: 10px 0" v-if="user.role===1">
                <el-button type="primary" @click="add" >新增</el-button>
                <el-popconfirm
                        v-if="user.role === 1"
                        title="确定删除吗？"
                        @confirm="deleteBatch"
                >
                    <template #reference>
                        <el-button type="danger" >批量删除</el-button>
                    </template>
                </el-popconfirm>
            </div>

            <!--搜索区域-->
            <div style="margin: 10px 0">
                <el-input v-model="pageInfo.query" placeholder="按书名查询" style="width: 20%" clearable></el-input>
                <el-button type="primary" style="margin-left: 5px" @click="load">查询</el-button>
            </div>

            <!--数据表格-->
            <el-table :data="tableData" stripe border style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="100">
                </el-table-column>
                <el-table-column prop="id" label="ID" sortable></el-table-column>
                <el-table-column prop="name" label="书名"></el-table-column>
                <el-table-column prop="author" label="作者"></el-table-column>
                <el-table-column prop="createTime" label="出版日期"></el-table-column>
                <el-table-column prop="price" label="价格"></el-table-column>
                <el-table-column  label="封面">
                    <template #default="scope">
                        <el-image
                                style="width: 120px;height: 150px"
                                :src="scope.row.cover"
                                :preview-src-list="[scope.row.cover]"
                        ></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="操作" v-if="user.role===1">
                    <template #default="scope">
                        <el-button size="mini"  type="warning" @click="handleEdit(scope.row)" >编辑</el-button>
                        <el-popconfirm title="确认删除吗？" @confirm="handleDelete(scope.row.id)">
                            <template #reference>
                                <el-button size="mini" type="danger">删除
                                </el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>

            <!--分页-->
            <div style="margin: 10px 0">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageInfo.pageNum"
                        :page-sizes="[5, 10, 20]"
                        :page-size="pageInfo.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
        </el-card>

        <!--添加按钮的弹出框-->
        <el-dialog title="提示" v-model="dialogVisible" width="30%">
            <el-form :model="form" label-width="120px">
                <el-form-item label="书名">
                    <el-input v-model="form.name" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="作者">
                    <el-input v-model="form.author" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="出版日期">
                    <el-date-picker v-model="form.createTime" value-format="YYYY-MM-DD" type="date" style="width: 80%" clearable></el-date-picker>
                </el-form-item>
                <el-form-item label="价格">
                    <el-input v-model="form.price" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="封面">
                    <el-upload ref="upload" action="http://localhost:9090/files/upload" :on-success="filesUpload">
                        <el-button type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>
            <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "Role.vue"
    }
</script>

<style scoped>

</style>
